<template>
	<div>
    <div class="lists-top">
      <lists-nav :navData="navData" @changeOrderType=changeOrderType></lists-nav>
    </div>
    <div class="lists-wrapper">
      <lists-con :curType="curType"></lists-con>
    </div>
  </div>
</template>

<script>
  import listsNav from './components/listsNav/index'
  import listsCon from './components/listsCon/index'
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
      listsNav,
      listsCon
    },
    data() {
      return {
        query: '',
        curType: 1,
        navData: {
          curType: 1
        }
      }
    },
    methods: {
      getOrderType() {
        this.query = this.$route.query
        if (this.query.type) {
          this.curType = this.query.type
        }
      },
      changeOrderType(type) {
        this.curType = type
      }
    },
    created() {
      this.getOrderType()
    },
    watch: {
      curType(val) {
        this.navData.curType = val
      }
    }
  })
</script>

<style lang="scss">
.lists-top{
  position:fixed;
  top:0;
  left:0;
  right: 0;
  max-width: 750px;
  margin: 0 auto;
  z-index:3;
  width:100%;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.lists-wrapper{
  padding-top:100px;
}
</style>